<template>
  <div>
    <div class="top-right clearfix">
      <a-button class="fl-r" type="primary" @click="goBackPricing" icon="backward">返回</a-button>
      <a-button class="fl-r" type="primary" @click="receiptAudit('1')" icon="">通过</a-button>
      <a-button class="fl-r" type="primary" @click="receiptAudit('2')" :loading="loading" icon="">不通过</a-button>
    </div>
    <a-card class="card" :bordered="false">

      <a-form :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item hidden>
              <a-input v-decorator="[ 'contractId' ]"/>
            </a-form-item>
            <a-form-item
              label="收款编号">
              <a-input
                read-only="read-only"
                placeholder="请输入收款编号"
                v-decorator="[ 'receiptCode', {rules: [{ required: true, message: '请输入收款编号', whitespace: true}]} ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
            <a-form-item
              label="合同编号">
              <a-input
                read-only="read-only"
                placeholder="请选择合同编号"
                v-decorator="[ 'contractNum' ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
            <a-form-item
              label="客户名称">
              <a-input
                read-only="read-only"
                placeholder="请选择客户名称"
                v-decorator="[ 'customerName', {rules: [{ required: true, message: '请选择客户名称', whitespace: true}]} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="结算方式"
            >
              <a-input
                read-only="read-only"
                v-decorator="[ 'payTypeName' ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
            <a-form-item
              label="收款账号">
              <a-input
                read-only="read-only"
                disabled
                placeholder="请输入帐号"
                v-decorator="[ 'payNumber', {rules: [{ required: true, message: '请选择客户名称', whitespace: true}]} ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
            <a-form-item
              label="收款日期">
              <a-input
                read-only="read-only"
                v-decorator="[ 'receiptTime' ]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-table
        :columns="softColumn"
        :dataSource="dataSource"
        :pagination="false"
        :loading="memberLoading"
        bordered
      >
        <div slot="order" slot-scope="text,record,index">
          <span>{{ index+1 }}</span>
        </div>
        <div slot="currency" slot-scope="text,record,index">
          <span v-if="text == 1">人民币</span>
        </div>
      </a-table>
      <a-row>
        <a-col :span="24" class="basic-vice-tit" justify="center">
          备注
          <a-form-item>
            <a-input disabled  placeholder="请输入备注信息" v-model = "remark" />
          </a-form-item>
        </a-col>
      </a-row>
      <div class="wdf-xyk">
        <div class="xyk-div">
          <span>创建人:</span>
          <span>{{ createdName }}</span>
        </div>
        <div class="xyk-div">
          <span>创建日期:</span>
          <span>{{ createTime }}</span>
        </div>

        <div v-if="isApprove" class="xyk-div">
          <span>审批人:</span>
          <span>{{ approveName }}</span>
        </div>
        <div v-if="isApprove" class="xyk-div">
          <span>审批日期:</span>
          <span>{{ approveTime }}</span>
        </div>
      </div>
      <a-modal
        title="不通过"
        @ok="handleOk"
        @cancel="handleCancelTwo"
        :confirmLoading="confirmLoadingTwo"
        :maskClosable="false"
        v-model="visibleTwo">
        <span :spinning="confirmLoadingTwo">
          <a-form :form="form2" class="form">
            <a-col>
              <a-form-item
                label="驳回原因">
                <a-input
                  placeholder="驳回原因"
                  v-decorator="[ 'rejected', {rules: [{ message: '请输入驳回原因', whitespace: true}]} ]"/>
                <a-alert v-if="hidden" type="error" message="请输入驳回原因" banner/>
              </a-form-item>
            </a-col>
          </a-form>
        </span>
      </a-modal>
    </a-card>
  </div>
</template>

<script>

  import EditableCell from '@/components/Table/EditableCell'
  import { receiptDetail, getContractOne, getAccountBankList, save , receiptAudit} from '@/api/receipt'
  import ReceiptSaleContract from './ReceiptSaleContract'
  import AFormItem from 'ant-design-vue/es/form/FormItem'
  import { getDeliverProductList, getContractById, getUnshipped } from '@/api/delayedPayment'

  const data = []
  export default {
    name: 'ReceiptSoftwareAudit',
    components: {
      AFormItem,
      ReceiptSaleContract,
      EditableCell
    },
    data () {
      return {
        form: this.$form.createForm(this),
        form2: this.$form.createForm(this),
        memberLoading: false,
        confirmLoadingTwo: false,
        detailId: '',
        hidden: false,
        beforeValueBoolean: false,
        moneyTypes: [],
        loading: false,
        createdName: '',
        createTime: '',
        approveTime: '',
        approveName: '',
        isApprove: false,
        visibleTwo: false,
        contractId:'',
        remark:'',
        info:'',
        softColumn: [
          {
            align: 'center',
            title: '序号',
            key: 'order',
            width: '70px',
            scopedSlots: { customRender: 'order' }
          },
          {
            title: '产品名称',
            dataIndex: 'productName'
          },
          {
            title: '金额',
            dataIndex: 'countMoney'
          },
          {
            title: '已收金额(元)',
            dataIndex: 'receivable'
          },
          {
            title: '本次实收金额(元)',
            dataIndex: 'paidMoney',
            scopedSlots: { customRender: 'paidMoney' }
          },
          {
            title: '结算折扣金额(元)',
            dataIndex: 'settlementDiscount',
            scopedSlots: { customRender: 'settlementDiscount' }
          },
          {
            title: '币种',
            dataIndex: 'currency',
            scopedSlots: { customRender: 'currency' }
          },
          {
            title: '币率',
            dataIndex: 'currencyRate',
            scopedSlots: { customRender: 'currencyRate' }
          }
        ],
        dataSource: [],
        queryParam: []
        // 加载数据方法 必须为 Promise 对象
      }
    },
    mounted () {
      this.init()
      //this.getContract()
    },
    methods: {

      init () {
        receiptDetail(this.$route.params).then(res => {
          console.log('res  ' + JSON.stringify(res))
          this.createdName = res.data.createName
          this.createTime = res.data.createTime
          this.contractId = res.data.contractId
          this.remark = res.data.remark
          if (res.data.receiptStatus > 1) {
            this.isApprove = true
            this.approveName = res.data.approveName
            this.approveTime = res.data.approveTime
          }
          const data = {
            'receiptCode': res.data.receiptCode,
            'contractNum': res.data.contractNum,
            'customerName': res.data.saleCustomerName,
            'payTypeName': res.data.payTypeName,
            'payNumber': res.data.payNumber,
            'receiptTime': res.data.receiptTime.substring(0, 10)
          }
          this.$nextTick(() => {
            this.form.setFieldsValue({ ...data })
          })
          this.dataSource = res.data.detailsList
        })
      },
      receiptAudit (type) {
        console.log(type)
        if (type == 2) {
          this.hidden = false
          this.visibleTwo = true
          this.beforeValueBoolean = true
          return
        }
        const paramer = {
          'id': this.$route.params.id,
          'type': type
        }
        receiptAudit(paramer).then((res) => {
          if (res.code == 200) {
            this.goBackPricing()
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      handleOk (e) {
        if (this.beforeValueBoolean) {
          this.form2.validateFields((err, values) => {
            if (values.rejected == undefined || values.rejected == null || values.rejected == '') {
              this.hidden = true
              return
            }
            const paramer = {
              'id': this.$route.params.id,
              'type': 2,
              'rejected': values.rejected
            }
            receiptAudit(paramer).then((res) => {
              if (res.code == 200) {
                this.form2.resetFields()
                this.$emit('close')
                this.visible = false
                this.visibleTwo = false
                this.goBackPricing()
              } else {
                this.$message.error(res.msg)
              }
            })
          })
        }
      },

      openModel () {
        console.log('openModel click')
        this.$refs.receiptContract.query()
      },
      // 返回
      goBackPricing () {
        // 点击返回，返回核价单列表页
        this.$router.push({ name: 'receiptList' })
        this.$destroy('ReceiptSoftwareAudit')
      },
      writeAccountNum (record) {
        const data = { 'accountNum': record.bankNum }
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...data })
        })
      },
      handleCancelTwo (e) {
        this.form2.resetFields()
      }
    }

  }
</script>
<style lang="less" scoped>
  .top-right {
    margin-bottom: 12px;
    margin-right: 6px;
  }

  .clearfix:after {
    display: block;
    content: '';
    width: 100%;
    height: 0;
    clear: both;
  }

  .clearfix {
    zoom: 1;
  }

  .fl-r {
    float: right;
    margin-left: 8px;
  }

  .wdf-xyk {
    margin: 20px auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .xyk-div span:nth-child(2) {
    margin-left: 10px;
  }
</style>
